<template>
	<view class="page">
		<view class="page-bg"></view>
		<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent"  left-width="36px" @clickLeft="linkCenter">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg"/>
			</template>
			<template>
				<view class="flex item-center justify-center" style="width: 100%;margin-right: 32px;">
					<image src="@/static/image/home-logo.png" class="size-32 mr-4" style="border-radius: 50%;">
					</image>
					<view class="flex item-center">
						<text class="text-bold font-16" style="margin-right: 4px;">火动通告 </text> |
						<text class="font-16" style="margin-left: 4px;">商家端</text>
					</view>
				</view>
			</template>
			<!-- <template v-slot:left>
				<view class="flex"   @click="linkCenter">
					<image src="@/static/image/home-logo.png" class="size-32 mr-4" style="border-radius: 50%;">
					</image>
					<view class="flex item-center">
						<text class="uni-primary text-bold" style="margin-right: 4px;">火动通告 </text> |
						<text style="font-size:8px;margin-left: 4px;">商家端</text>
					</view>
				</view>
			</template> -->
		</uni-nav-bar>
		<successPage   v-if="data.auditState == 1"  :settleData="data"></successPage>
		  <!-- v-if="data.auditState == 4" -->
		<view class="content" v-if="data.auditState == 4">
			<view class="icon-success flex item-center justify-center">
				<uni-icons type="checkmarkempty" size="80" color="#ffffff"></uni-icons>
			</view>
			<view class="load-text">待签约</view>
			<view class="load-msg">您的入驻申请已通过，我们将为您开通营销账户服务，请确认开户，并完成以下操作</view>
			<view class="res-title">1、开户服务协议签署</view>
			<!-- <view class="flex item-center justify-center"> -->
			<!-- <view class="release-btn" @click="linkUrl">去签约</view> -->
			<view class="load-msg join-box">签约短信已发送至您<text class="no-load-tip">{{data.agreementLink}}</text>手机号上
			请注意查收【汇付天下】名称的短信</view>
			<!-- </view> -->
			<view class="load-title-box">
				<view>
					请在申请通过后3日内完成签约。若签约过期或其他问题
				</view>
				
				<view class="flex item-center justify-center">
					请
					<button class="no-load-tip" open-type="contact" >
						联系客服
					</button>
				</view>
				
			</view>
			<view class="res-title">2、营销补贴合作协议下载</view>
			<view class="res-load-box">
				<view>开通营销补贴分账功能需签署《营销补贴补充协议》请下载协议，加盖公章后，寄送至下述地址:</view>
				<view class="load-file" @click="downLoadFile">下载《营销补贴补充协议》</view>
				<view class="res-adress">
					收件人:张任琪
				</view>
				<view class="res-adress">
					联系电话:021-33323999
				</view>
				<view class="res-adress">
					收件地址:上海市徐汇区宜山路700号普天产业科技园C5栋汇付天下总部大楼
				</view>
				<view class="copy-btn" @click="copyAdress">复制地址</view>
			</view>
		</view>	
		<view class="content" v-if="data.auditState == 3">
			<!-- <view class="content"  v-if="data.auditState == 3"> -->
			<view class="icon-fail flex item-center justify-center">
				<uni-icons type="closeempty" size="80" color="#ffffff"></uni-icons>
			</view>
			<view class="load-text">审核不通过</view>
			<view class="load-tip">原因：{{data.refuseReason}}</view>
			<view class="release-btn" @click="nextStep">修改入驻资料</view>
		</view>
	</view>
</template>

<script setup>
	import uniIcons from '@/applyPages/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import {getEnterInfo} from '@/applyPages/api/businessEnterApply.js'
	import successPage from '../components/successPage.vue'
	import {ref,onMounted} from 'vue';
	import {onShow} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	// import { myPageApi } from '@/api/index.js'
	const data = ref({})
	const needRefresh = ref(false)
	const copyAdress = () => {
		uni.setClipboardData({
			data: '张任琪  021-33323999  上海市徐汇区宜山路700号普天产业科技园C5栋汇付天下总部大楼',
			success: function () {
				console.log('success');
				uni.showToast({
					icon:'none',
					title:'复制成功'
				})
			}
		});

	}
	const linkCenter = () => {
		uni.redirectTo({
			url: '/pages/home/home?tab=4'
		});
	}
	const getInfo = async () => {
		let result = await getEnterInfo()
		if(result){
			// result.auditState = 4
			data.value = result
			if(result.auditState == 2){
				userStore.getUserInfo()
				linkCenter()
			}
		}
	}
	const getPhone = (phone) => {
		return phone.replace(phone.substring(3,7), "****")
	}
	const nextStep = () => {
		uni.navigateTo({
			// url:`/applyPages/bussinessApply/bussinessApplyType?result=rebuild`
			url: `/applyPages/bussinessApply/bussinessAgreement?result=rebuild`
		})
	}
	const downLoadFile = () => {
		// <!-- https://api.huodongtg.com/斗拱平台综合支付服务协议代运营补充协议.docx -->
		uni.downloadFile({
			url: 'https://api.huodongtg.com/斗拱平台综合支付服务协议代运营补充协议.docx', //仅为示例，并非真实的资源
			success: (res) => {
				if (res.statusCode === 200) {
					console.log('下载成功');
					 wx.shareFileMessage({
						filePath: res.tempFilePath,
						success() {},
						fail: console.error,
					})
				}
			}
		});
	}
	
	const linkUrl = () => {
		uni.redirectTo({
			url: `/pagesC/webview/webview?title=${encodeURIComponent('商家签约')}&url=${encodeURIComponent(data.value.agreementLink)}`,
			success(res) {
				console.log('打开签约地址', res)
				needRefresh.value = true
			},
			
		});
	}
	onMounted(() => {
		getInfo()
	})
	onShow(async () => {
		if (needRefresh.value) {
			getInfo()
		}
	})
</script>

<style scoped lang="scss">
.page {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: #ffffff;
}
.content{
	position: relative;
	z-index: 1;
}
.page-bg {
	z-index: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);
	background-size: 396px 396px;
	background-repeat: no-repeat;
	filter: blur(50px);
}

.icon-success ,.icon-fail{
	width: 100px;
	height: 100px;
	background: rgba(252, 181, 19, 1);
	border-radius: 50%;
	margin: 20px auto;
}
.icon-fail{
	background-color: rgba(250, 69, 67, 1);
}
.load-text{
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
}
.load-tip{
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	text-align: center;
	color: rgba(51, 51, 51, 0.6);
	margin: 0 20px;
	margin-top: 12px;
	word-break: break-all;
}
.release-btn {
	// width: 343px;
	height: 46px;
	padding: 12px, 20px, 12px, 20px;
	border-radius: 8px;
	// gap: 10px;
	background: #FA4543;
	color: #ffffff;
	margin: 20px 20px;
	text-align: center;
	line-height: 46px;

	&.unactive {
		background: rgba(169, 171, 172, 1);
	}
}
.res-title{
	margin:10px 20px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
}
.load-msg{
	margin:20px 20px 0px 20px;
	padding: 10px;
	background: rgba(245, 245, 245, 1);
	border-radius: 12px;
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	text-align: center;
	color: rgba(51, 51, 51, 0.6);
}
.no-load-tip{
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: 0px;
	text-align: center;
	color: rgba(0, 174, 255, 1);
	margin: 0;
	padding: 0;
	margin-left: 2px;
}
.copy-btn{
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: 0px;
	text-align: center;
	color: rgba(0, 174, 255, 1);
}
.res-load-box{
	margin: 20px;
	padding: 10px;
	background: rgba(245, 245, 245, 1);
	border-radius: 12px;
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	color: rgba(51, 51, 51, 1);
	.load-file{
		color: rgba(0, 174, 255, 1);
		padding: 6px 0;
	}
	.res-adress{
		padding: 0 0 4px 0;
	}
}
.join-box{
	background-color: unset;
}	
.join-btn{
	background-color: rgba(250, 69, 67, 1);
}
.load-title-box{
	margin: 20px;
	padding: 10px;
	background: rgba(245, 245, 245, 1);
	border-radius: 12px;
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	color: rgba(51, 51, 51, 1);
}
.font-16{
	font-size: 32rpx;
}
</style>
